<template>
<div class="uploads_class">
  <a-row>
      <div class="" style="margin-top: 30px;">
    </div>
  </a-row>
  <a-row>
    <a-col :span="12">
        <a-row>
            <a href="" class="ant-upload ant-upload-select ant-upload-select-text" style="margin-left: 10px;">本地上传文件:</a>
            <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-right: 30px;float: right;">
                <span role="button" tabindex="0" class="ant-upload">
                    <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="upload_files_pre">
                        <a-icon type="upload"/>
                        <span>开始上传</span> 
                    </button>
                </span>
            </div>
            <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-right: 30px;float: right;">
                <span role="button" tabindex="0" class="ant-upload">
                    <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="delete_files">
                        <a-icon type="delete"/>
                        <span>清空</span> 
                    </button>
                </span>
            </div>
            <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-right: 30px;float: right;">
                <span role="button" tabindex="0" class="ant-upload">
                    <input type="file" id="inputfile" ref="inputfile" accept="image/tiff" multiple="multiple" style="display: none;"  @change="changefile">
                    <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="select_files">
                        <a-icon type="file-add"/>
                        <span>选择文件</span>
                    </button>
                </span>
            </div>
        </a-row>
        <a-row style="margin-top: 50px;" >
            <div style="width: 95%;margin: auto;">
                <a-table :data-source="files" :columns="files_columns"
                    class="m-manager-table__table m-manager-table__hover--none m-manager-table__choose--none" size="small"
                    :showHeader="true"  tableLayout="auto" 
                    :pagination="files_pagination"
                    bordered
                    >
                    <span slot="progrogres" slot-scope="text, record">
                        <a-progress :percent="record.percentage" status="active" v-show="record.uploading"/>
                        <a-badge status="success" text="成功" v-show="record.uploadsucess" />
                        <a-badge status="error" text="失败" v-show="record.uploaderror" />
                        <a-badge status="default" text="未上传" v-show="record.uploading==false && !(record.uploadsucess ||record.uploaderror)" />
                    </span>
                    <template slot="operation" slot-scope="text, record">
                        <a-popconfirm  title="Sure to delete?" @confirm="() => delete_file(record.key)">
                            <a href="javascript:;">删除</a>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>
        </a-row>
    </a-col>
    <a-col :span="12">
        <a-row>
            <a href="" class="ant-upload ant-upload-select ant-upload-select-text" style="margin-left: 10px;">服务器目录:</a>
            <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-right: 30px;float: right;">
                <span role="button" tabindex="0" class="ant-upload">
                    <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="route_click('/')">
                        <a-icon type="rollback"/>
                        <span>返回根目录</span>
                    </button>
                </span>
            </div>
            <!-- <div class="ant-upload ant-upload-select ant-upload-select-text" style="margin-right: 30px;float: right;">
                <span role="button" tabindex="0" class="ant-upload">
                    <button type="button" class="ant-btn" ant-click-animating-without-extra-node="false" @click="mkdir">
                        <a-icon type="plus"/>
                        <span>创建目录</span>
                    </button>
                </span>
            </div> -->
        </a-row>
        <a-row style="margin-top: 5px;" >
            <div class="ant-breadcrumb">
                <span class="" v-for="(item, index) in server_path" :key="index">
                    <span class="ant-breadcrumb-link" v-if="index>=0 && index<=server_path.length-1">
                        <a href="javascript:;" style="margin: 0 8px;"  @click="route_click(item)">{{item}}</a>
                    </span>
                    <span class="ant-breadcrumb-separator" v-if="index>0 && index<server_path.length-1">/</span>
                </span>
            </div>
        </a-row>
        <a-row style="margin-top: 25px;" >
            <div style="width: 95%;margin: auto;">
                <a-table :data-source="filesServer" :columns="filesServer_columns" class="m-manager-table__table m-manager-table__hover--none m-manager-table__choose--none" size="small"
                    :showHeader="true"  
                    tableLayout="auto" 
                    :pagination="filesServer_pagination"
                    :customRow="filesServerRow"
                    bordered
                    style="height:500px"
                    >
                    <span slot="fstype" slot-scope="text, record"> 
                        <a-icon type="file" v-show="record.fstype=='file'"/>
                        <a-icon type="folder" v-show="record.fstype=='dir'"/>
                    </span>
                    <template slot="operation" slot-scope="text, record">
                        <a-button type="dashed"  @click="server_delete(record)" v-show="record.fstype=='file'">删除文件</a-button>
                        <a-button type="dashed"  @click="server_delete_dir(record)" v-show="record.fstype=='dir'">删除文件夹</a-button>
                        <!-- <a-divider type="vertical" /> -->
                        <a target="_blank" :href="get_server_download_url(record)" v-show="record.fstype=='file'" style="margin-left: 5px;">下载文件</a>
                    </template>
                </a-table>
            </div>
            
        </a-row>
    </a-col>
  </a-row>
   <a-modal v-model="mkdir_visible" title="创建文件夹" 
    @ok="mkdir_ok"
    :maskClosable="false"
    okText="创建"
    okType="dashed"
    :destroyOnClose="true"
    cancelText='取消'
    cancelokType="dashed"
    @cancel="mkdir_cancle"
    >
      <a-input placeholder="" v-model="mkdir_dir"/>
    </a-modal>
</div>
</template>
<script>
const _files_columns =[
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width:250,
        align:'center'
    },
    {
        title: '大小',
        dataIndex: 'size',
        key: 'size',
        width:100,
        align:'center'
    },
    {
        title: '状态',
        scopedSlots: { customRender: 'progrogres' } ,
        width:350,
        key: 'progrogres',
        align:'center'
    },
    {
        title: '操作',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
        align:'center'
    },
]
const _files_pagination ={
    size:'small',
    pageSize:10,
    showTotal:(total, range)=>{
        return `共 ${total} 个，当前${range[0]}-${range[1]}`
    }
}
const _filesServer_columns=[
    { 
        title: '类型',
        key: 'fstype', 
        scopedSlots: { customRender: 'fstype' } ,
        width:50,
        align:'center'
    },
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align:'center',
        width:250,
    },
    {
        title: '操作',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
        align:'center'
    },
]
const _filesServer_pagination ={
    size:'small',
    pageSize:10,
    showTotal:(total, range)=>{
        return `共 ${total} 个，当前${range[0]}-${range[1]}`
    }
}
    export default {
        data() {
            return {
                files:[],
                files_columns:_files_columns,
                files_pagination:_files_pagination,
                filesServer_columns:_filesServer_columns,
                filesServer_pagination:_filesServer_pagination,
                server_path:[],
                mkdir_visible:false,
                mkdir_dir:'',
                filesServer:[],
                upload_index:0,
                filesServerRow: record => ({
                    on: {
                        dblclick: (event) => {
                            this.dblclick(record);
                        },
                    }
                }),
            }
        },
        mounted() {
            this.Topath('/')
        },
        methods:{
            select_files(){
                let _this=this;
                setTimeout(function(){
                    _this.$refs.inputfile.click();
                },10)
            },
            changefile(event){
                this.files=[];
                let index=0
                event.srcElement.files.forEach((_file,_index) => {
                    if(_file.type=="image/tiff"){
                        this.files.push({
                            file:_file,
                            key:index,
                            name:_file.name,
                            size:_file.size,
                            uploading:false,
                            uploaderror:false,
                            uploadsucess:false,
                            percentage:0,
                        })
                        index=index+1
                    }
                });
                document.getElementById('inputfile').value= '';
            },
            delete_file(key) {
                let dataSource = [...this.files];
                this.files = dataSource.filter(item => item.key !== key);
            },
            delete_files(){
                this.files=[]
            },
            //不管是否成功都重新上传
            upload_files_pre(){
                if(this.files.length==0){
                    this.$message.info('没有上传文件'); return
                }
                this.upload_index=0
                this.files.forEach((_file,_index) => {
                    this.files[_index].uploading=false
                    this.files[_index].uploaderror=false
                    this.files[_index].uploadsucess=false
                    this.files[_index].percentage=0
                });
                this.upload_files()
            },
            upload_files(){
                if(this.upload_index<=this.files.length-1){
                    let file=this.files[this.upload_index]
                    file.uploading=true
                    file.uploaderror=false;
                    file.uploadsucess=false;
                    this.$upload.set_options({
                        file:file.file,
                        action:this.$axios.defaults.baseURL+"uploads?",
                        data:{
                            // type:'uploadfile',
                            rootdir:this.get_recent_path(),
                            
                        },
                        onProgress:this.onProgress,
                        onSuccess:this.onSuccess,
                        onError:this.onError,
                        token:this.$store.state.user.token
                    })
                }
                else{
                    this.$message.info('上传结束')
                }
                this.$forceUpdate()
            },
            onProgress(value){
                this.files[this.upload_index].percentage=value
            },
            onSuccess(filename){
                this.files[this.upload_index].uploading=false
                this.files[this.upload_index].uploadsucess=true
                this.upload_index+=1;
                this.upload_files();
                this.get_paths();
            },
            onError(message){
                this.files_to_be_upload[this.upload_index].uploading=false
                this.files_to_be_upload[this.upload_index].uploaderror=true
                this.upload_index+=1;
                this.upload_files();
            },
            get_recent_path(server_path){
                let path=[]
                if(server_path){
                    path=server_path
                }
                else{
                    path=[...this.server_path]
                }
                return (path.join('/')+'/').replace('//','/')
            },
            get_paths(_path){
                if(!_path){
                    _path=this.get_recent_path()
                }
                this.$common_apis.axios_get('/get_path?',{
                    path:_path
                },true).then(result => {
                    if(result){
                        this.filesServer=[]
                        let filesServer=[]
                        let key=0
                        result.dirs.forEach(_dir => {
                            filesServer.push({
                                fstype:'dir',
                                name:_dir.file,
                                key:key,
                            })
                            key+=1
                        });
                        result.files.forEach(_file => {
                            filesServer.push({
                                fstype:'file',
                                name:_file,
                                key:key,
                            })
                            key+=1
                        });
                        this.filesServer=filesServer
                        this.server_path=result.path
                    }
                });
            },
            Topath(_path){
                let _dir_post=(this.get_recent_path()+_path).replace('//','/')
                this.get_paths(_dir_post)
            },
            route_click(_path){
                let _new_server_path=[]
                let _index=this.server_path.findIndex((_ppath)=>{
                    return _ppath==_path
                })
                if(_index>=0){
                    _new_server_path=this.server_path.slice(0,_index+1)
                    let server_path=this.get_recent_path(_new_server_path)
                    let currnt=this.get_recent_path()
                    if(server_path==currnt){

                    }
                    else{
                        this.get_paths(server_path)
                    }
                }
            },
            async dblclick(record){
                if(record.fstype=='dir'){
                    this.Topath(record.name)
                }  
            },
            async mkdir(){
                this.mkdir_dir=''
                this.mkdir_visible=true
                this.WaitInputDirName =new Promise((resolve)=>{this.WaitInputDirName_resolve=resolve;});
                let inputOK=await this.WaitInputDirName
                if(inputOK){
                    this.post_delete('mk_dir',this.mkdir_dir)
                }
            },
            mkdir_ok(){
                this.mkdir_visible=false
                if(this.mkdir_dir===''){
                    this.WaitInputDirName_resolve(false);
                }
                else{
                    this.WaitInputDirName_resolve(true);
                }
            },
            mkdir_cancle(){
                this.mkdir_visible=false
                this.WaitInputDirName_resolve(false);
            },
            post_delete(_route,_name){
                let _dir_post=this.get_recent_path()+_name
                this.$common_apis.axios_post(`${_route}?`,{
                    path:_dir_post
                },true).then(result => {
                    if(result){
                        this.get_paths()
                    }
                });
            },
            server_delete(record){
                this.post_delete('del_file',record.name)
            },
            server_delete_dir(record){
                this.post_delete('del_dir',record.name,true)
            },
            get_server_download_url(record){
                let _dir_post=this.get_recent_path()+record.name
                let _downfile=`${this.$axios.defaults.baseURL}downloadfile?path=${_dir_post}&userid=${this.$store.state.user.user.id}`
                return _downfile
            },
        }
  }
</script>
<style >
.ant-separator-root:hover {
  color: #40a9ff;
  cursor: pointer;
}
</style>